<script setup>
import {Image, NavBar} from "vant";
import { ref} from 'vue';
import {useRoute, useRouter} from "vue-router";
import MyNavBar from "@/components/MyNavBar/index.vue";

const onClickLeft = () => history.back();


const router = useRouter();
const route = useRoute();
const title = ref(null);
const time = ref(null);
const content = ref(null);
const iconUrl = ref(null);
const username = ref(null);

// 获取item参数
title.value = route.params.title;
time.value = route.params.time;
content.value = route.params.content;
iconUrl.value = route.params.iconUrl;
username.value = route.params.username;
</script>

<template>
<!--  <MyNavBar title="详细信息"/>-->
  <div class="container">
    <div class="header">
      <h1 class="title">{{ this.title }}</h1>
    </div>
    <p class="time">{{ this.time }}</p>
    <div class="content">
      <p>{{ this.content }}</p>
    </div>
    <div class="user-icon-container">
      <Image
          round
          width="35px"
          height="35px"
          style="border: 1px solid #1e1f22"
          :src="this.iconUrl"
      />
      <span class="card-name">{{ this.username }}</span>
    </div>
  </div>

</template>

<style scoped>
.container {
  display: flex;
  flex-direction: column;
  padding: 20px;
}

.header {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
}

.title {
  margin: 0; /* 移除标题默认的上下边距 */
}

.time{
  font-size: 18px;
}

.content {
  text-align: left;
  font-size: 20px;
  line-height: 1.5; /* 设置每行的间距 */
}

.user-icon-container {
  margin-top: 100px;
  display: flex; /* 使用 Flexbox 布局 */
  align-items: center; /* 垂直居中对齐 */
  justify-content: flex-end; /* 主轴末端对齐 */
  gap: 10px; /* 左右相隔 30px */
}


.card-name {
  font-size: 16px;
}
</style>
